<template>
  <div id="centerLeft1">
    <div class="bg-color-black">
      <div class="d-flex pt-2 pl-2">
        <span>
          <icon name="chart-bar" class="text-icon"></icon>
        </span>
        <div class="d-flex">
          <span class="fs-xl text mx-2">风险数量</span>
          <dv-decoration-3 class="dv-dec-3" />
        </div>
      </div>

      <div class="chart-and-data">
        <div class="d-flex jc-center chart-container">
          <!-- 传递转换后的数据给 Chart 组件 -->
          <Chart :riskLevels="riskLevels" />
        </div>

        <div class="bottom-data">
          <div class="item-box" v-for="(item, index) in riskLevels" :key="index">
            <p class="text">
              {{ item.text }} <span class="colorYellow">{{ item.number.number[0] }}</span> 个
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Chart from '@/components/echart/centerLeft/centerLeft1Chart/index.vue'
import {mapActions} from "vuex";

export default {
  data() {
    return {
      userData: {
        id: ''
      },
      riskLevels: []
      // riskLevels: [
      //   { text: '低风险', number: { number: [320] } },
      //   { text: '中风险', number: { number: [215] } },
      //   { text: '高风险', number: { number: [100] } }
      // ]
    }
  },
  mounted() {
    this.userData.id = this.$store.state.user.userInfo.id;
    console.log(this.userData.id, 'userData.id')
    console.log('centerLeft1 mounted')
    this.init()
  },
  computed: {

    cdata() {
      return {
        xData: this.riskLevels.map(item => item.text),
        seriesData: this.riskLevels.map(item => ({
          value: item.number.number[0],
          name: item.text
        }))
      }
    }
  },
  methods: {
    // 获取风险数量
  ...mapActions(['countRiskLevel']),
    async init() {
      const response = await this.countRiskLevel(this.userData.id);
      console.log('接口返回数据:', response.data); // 应该是 [14, 79, 0]

      this.riskLevels = [
        { text: '低风险', number: { number: [response.data[0]] } },
        { text: '中风险', number: { number: [response.data[1]] } },
        { text: '高风险', number: { number: [response.data[2]] } }
      ];
    }



  },
  components: {
    Chart
  }
}
</script>


<style lang="scss" scoped>
$box-width: 510px;
$box-height: 250px;

#centerLeft1 {
  padding: 16px;
  height: $box-height;
  width: $box-width;
  border-radius: 10px;

  .bg-color-black {
    height: $box-height - 30px;
    border-radius: 10px;
  }

  .text {
    color: #c3cbde;
    font-size: 20px;
  }

  .dv-dec-3 {
    position: relative;
    width: 100px;
    height: 20px;
    top: -3px;
  }

  .chart-and-data {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .chart-container {
    flex: 1;
  }

  .bottom-data {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;

    .item-box {
      display: flex;
      flex-direction: row;
      font-size: 16px;
      color: #d3d6dd;
      margin-bottom: 8px;

      .colorYellow {
        color: yellowgreen;
        font-weight: bold;
      }
    }
  }
}
</style>
